import React, { VFC, useEffect, useState} from "react"
import { Table, TablePaginationConfig, Select, Button } from 'antd'
import { useHistory } from "react-router-dom";;
import PageContent from '@layout/PageContent';

import { getTeamGroupList} from '@services/index';
// import { getTeamGroup} from './getTeamList';
import {useRecoilValue} from 'recoil'
// import {getLoginInfoState} from '@selectors/selectLoginInfo'
import { fetchProjectIssueAllList } from '@selectors/selectProduct';

import Prospectus from '@components/common/prospectus'
import Report  from '@components/common/report'
import PlanReport from '@components/common/planReport'
import PurchaseReport from '@components/common/purchaseReport'
import DetectSummary from '@components/common/detectSummary'
import TestReport from '@components/common/testReport'
import DesignReport from '@components/common/designReport'
import LaunchSummary from '@components/common/launchSummary'
import TeamBusinessPlan from '@components/common/teamBusinessPlan'
import Auction from '@components/common/auction'
import Profit from '@components/common/profit'
import Certificate from "@components/common/certificate";
import styled from "styled-components";

const { Option } = Select;

const team:VFC = () => {
    const {location} = useHistory() as any
    // const LoginInfo = useRecoilValue(getLoginInfoState)
    const [isVisible, setIsVisible] = useState<boolean>(false);
    let [issueId, setIssueId] = useState<string|undefined>(undefined);
    const [dataInfo, setDataInfo] = useState<any>(null);
    const [dataList, setDataList] = useState<any[]>([]);
    const [loading, setLoading] = useState<boolean>(false)
    const [routeName, setRouteName] = useState<string>('')
    const [pagination, setPagination] = useState<TablePaginationConfig>({
        current: 1,
        pageSize: 10,
        total: 0,
        showTotal: total => `共 ${total} 条 `,
    });
    useEffect(()=>{
        const routePath = location.state?.routePath
        const rNameArr = routePath.split('-');
        setRouteName(rNameArr[1])
        initData();
    },[]);
    // 获取列表 数据
    const initData= async () =>{
        setLoading(true)
        try{
            const { data, status } = await getTeamGroupList({
                pageNum:pagination.current,
                pageSize:pagination.pageSize,
                issueId: issueId,
                projectId: JSON.parse(sessionStorage.userInfo).projectId
            })
            if(status === '0'){
                const {list, total} = data
                setDataList(list);
                setPagination({
                    ...pagination,
                    total
                });
            }
        }finally{
            setLoading(false)
        }
    }
    // 表格列名称
    const columns = [
        {title: '小组名称',dataIndex: 'name', render: (r:any)=><div>{r?r:'-'}</div>},
        {title: '操作', dataIndex: 'operation', render: (_: any, record: any) => <a onClick={() => handleEdit(record)} style={{ marginRight: 8 }}>查看</a>}
    ]
    // 编辑
    const handleEdit = (e: any) => {
        setDataInfo(e);
        setIsVisible(true)
    }
    // 触发分页
    const onTableChange = (page:TablePaginationConfig) => {
        pagination.current = page.current
        pagination.pageSize = page.pageSize
        setPagination({...pagination})
        initData();
    }
    const onCancel = () => setIsVisible(false)
    const paramsData = {
        isVisible,
        teamId: dataInfo?.id,
        projectId: dataInfo?.projectId,
        onCancel:()=>onCancel()
    }
    const renderSearch = () => (
        <SEARCH className="box-search dflex br2">
            <div className="search-items dflex">
                <div className="_items dflex">
                    <label>所属期数</label>
                    <Select value={issueId} style={{ width: 120 }} onChange={e => setIssueId(e)}>
                        {
                            useRecoilValue(fetchProjectIssueAllList).map( (item, key) => {
                                return <Option value={item.id} key={key}>{item.name}</Option>
                            })
                        }
                    </Select>
                </div>
            </div>
            <div className="btns">
                <Button type="primary" onClick={initData}>查询</Button>
            </div>
        </SEARCH>
    )
    return (
        <>
        {renderSearch()}
        <PageContent title={location.state?.name}>
            <div className="content br2">
                <Table 
                    rowKey={({id})=> id}
                    bordered
                    columns={columns} 
                    dataSource={dataList}
                    onChange={onTableChange}
                    pagination={pagination}
                    loading={loading}
                    scroll={{ x: 0 }}
                />
            </div>
            {/* 探测计划评测 */}
            {(routeName === 'prospectus' && isVisible) && <Prospectus {...paramsData}/>}
            {/* 财务报表评测 */}
            {(routeName === 'report' && isVisible) && <Report {...paramsData}/>}
            {/* 探测设计报告 */}
            {(routeName === 'planReport' && isVisible) && <PlanReport {...paramsData}/>}
            {/* 设备采购报表 */}
            {(routeName === 'purchaseReport' && isVisible) && <PurchaseReport {...paramsData}/>}
            {/* {探测器研制总结报告} */}
            {(routeName === 'detectSummary' && isVisible) && <DetectSummary {...paramsData}/>}
            {/* 测试报告 */}
            {(routeName === 'testReport' && isVisible) && <TestReport {...paramsData}/>}
            {/* 飞行任务报告 */}
            {(routeName === 'designReport' && isVisible) && <DesignReport {...paramsData}/>}
            {/* 发射总结报告 */}
            {(routeName === 'launchSummary' && isVisible) && <LaunchSummary {...paramsData}/>}
            {/* 商业计划书 */}
            {(routeName === 'teamBusinessPlan' && isVisible) && <TeamBusinessPlan {...paramsData}/>}
            {/* 拍卖处理 */}
            {(routeName === 'auction' && isVisible) && <Auction {...paramsData}/>}
            {/* 盈利分析报告 */}
            {(routeName === 'profit' && isVisible) && <Profit {...paramsData}/>}
            {/* 荣誉证书 */}
            {(routeName === 'certificate' && isVisible) && <Certificate {...paramsData}/>}
        </PageContent>
        </>
    )
}
export default team
const SEARCH = styled.div`
justify-content: end;
`
